<template>
  <div>新闻内容{{content}}</div>
</template>


<script lang="ts">
   export default {
       name: 'Detail',
   }
</script>


<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, watch} from 'vue'
import {useRoute} from 'vue-router'
const route = useRoute()
// 打印query参数
console.log('query params',route.params)
let query = ref(route.params)
let {id,content} = toRefs(query.value)

watch(
  () => route.params,
  (newQuery, oldQuery) => {
    console.log('query 参数变化了：', newQuery)
    // 在这里可以更新你的数据
    content.value = newQuery.content
  },
  { deep: true, immediate: true }
)
</script>

<style scoped lang="less">
.news-detail-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.8;
}

.news-detail-content h2 {
  color: #000; /* 黑色标题 */
  margin-bottom: 20px;
  font-size: 28px; /* 更大的标题字体 */
  border-left: 4px solid #42b983;
  padding-left: 10px;
}

.news-detail-content p {
  color: #000; /* 黑色正文 */
  font-size: 18px; /* 更大的正文字体 */
  white-space: pre-wrap; /* 保留换行符 */
}
</style>